<template>
  <div>
    <a-row :gutter="48">
      <a-col :md="20" :sm="24" class="height60">
        <span class="fontStyle"
          >{{ label }}
          <a-icon
            slot="icon"
            type="question-circle"
            :title="tipTitle"
            class="tip"
          />：</span
        >
        <span v-show="!visiable">{{ initVlaue }}</span>
        <a-input
          ref="input"
          type="text"
          v-show="visiable"
          size="small"
          :style="{ width: '68px' }"
          :value="initVlaue"
          @change="confirmChange"
        />
        <span>天</span>
        <a-button
          class="mb10"
          type="primary"
          @click="handleEdit()"
          v-show="!visiable"
          >编辑</a-button
        >
        <a-button
          class="btn-cert mb10"
          type="primary"
          @click="confirmCommit"
          v-show="visiable"
        >
          保存
        </a-button>
        <a-button class="btn-cert mb5" @click="handleCancel" v-show="visiable">
          取消
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String
    },
    tipTitle: {
      type: String
    },
    // 默认值
    initVlaue: {
      type: Number
    },
    // 显示隐藏参数
    visiable: {
      type: Boolean
    }
  },
  data() {
    return {
      vlaue: 0
    };
  },
  created() {},
  methods: {
    //修改数据
    confirmChange(e) {
      this.vlaue = Number(e.target.value);
    },
    // 点击编辑按钮
    handleEdit() {
      this.$emit("changeVisiable", this.visiable);
    },
    // 保存
    confirmCommit() {
      this.$emit("getvlaue", this.vlaue);
      this.$emit("changeVisiable", this.visiable);
    },
    //取消
    handleCancel() {
      this.$emit("changeVisiable", this.visiable);
    }
  }
};
</script>

<style scoped>
.content {
  min-height: 580px;
  padding-left: 20px;
}
.photoButton {
  margin-top: 20px;
}
.mb10 {
  margin-bottom: 10px;
  margin-left: 60px;
}
.mb5 {
  margin-bottom: 10px;
  margin-left: 30px;
}
.fontStyle {
  display: inline-block;
  margin-bottom: 10px;
  font-weight: bold;
  margin-right: 10px;
}
.tip {
  cursor: pointer;
  margin-left: 3px;
}
.height60 {
  height: 60px;
}
</style>
